<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../styles/common.css"/>
    <link rel="stylesheet" href="../../styles/page.css"/>
    <link rel="stylesheet" href="../../styles/zgs.css">
</head>


<body>
<div class="dashboard-container" id="category-app">
    <div class="container">

        <div class="zgs-header-div">
            <div class="zgs-el-tabs">
                <el-tabs type="border-card" style="width: 100%">
                    <el-tab-pane label="汇总">

                        <div class="zgs-card-div">
                            <el-card class="box-card zgs-el-card">
                                <div slot="header" class="clearfix">
                                    <span>{{today}} 日报未交人员</span>
                                </div>
                                <el-tag type="success">职工</el-tag>
                                <span v-for="item in noSubData.teacher" :key="noSubData.teacher.id" class="text item">
                                {{item.name}}
                                </span>
                                <el-divider></el-divider>
                                <el-tag type="warning">学生</el-tag>
                                <span v-for="item in noSubData.student" :key="noSubData.student.id" class="text item">
                                {{item.name}}
                                </span>
                            </el-card>
                        </div>

                        <div class="el-progress--circle zgs-circle">
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>{{today}} 日报提交提交情况</span>
                                </div>
                                <div v-if="percentValue === 100" class="item zgs-progress-div">
                                    <el-progress type="circle" :percentage="percentValue" width=300
                                                 color="#31aa74"></el-progress>
                                </div>
                                <div v-else-if="percentValue >= 70" class="item zgs-progress-div">
                                    <el-progress type="circle" :percentage="percentValue" width=300></el-progress>
                                </div>
                                <div v-else-if="percentValue >= 50" class="item zgs-progress-div">
                                    <el-progress type="circle" :percentage="percentValue" width=300
                                                 color="#FEA443"></el-progress>
                                </div>
                                <div v-else class="item zgs-progress-div">
                                    <el-progress type="circle" :percentage="percentValue" width=300
                                                 color="#881400"></el-progress>
                                </div>
                            </el-card>
                        </div>

                    </el-tab-pane>

                    <el-tab-pane label="职工">
                        <div class="zgs-card-div">
                            <el-card class="box-card zgs-el-card">
                                <div slot="header" class="clearfix">
                                    <span>{{today}} 日报未交人员</span>
                                </div>
                                <el-tag type="success">职工</el-tag>
                                <span v-for="item in noSubData.teacher" :key="noSubData.teacher.id" class="text item">
                                {{item.name}}
                                </span>
                            </el-card>
                        </div>

                        <div class="el-progress--circle zgs-circle">
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>{{today}} 日报提交提交情况</span>
                                </div>
                                <div v-if="percentValue2Tea === 100" class="item zgs-progress-div">
                                    <el-progress type="circle" :percentage="percentValue2Tea" width=300
                                                 color="#31aa74"></el-progress>
                                </div>
                                <div v-else-if="percentValue2Tea >= 70" class="item zgs-progress-div">
                                    <el-progress type="circle" :percentage="percentValue2Tea" width=300></el-progress>
                                </div>
                                <div v-else-if="percentValue2Tea >= 50" class="item zgs-progress-div">
                                    <el-progress type="circle" :percentage="percentValue2Tea" width=300
                                                 color="#FEA443"></el-progress>
                                </div>
                                <div v-else class="item zgs-progress-div">
                                    <el-progress type="circle" :percentage="percentValue2Tea" width=300
                                                 color="#881400"></el-progress>
                                </div>
                            </el-card>
                        </div>

                    </el-tab-pane>

                    <el-tab-pane label="学生">
                        <div class="zgs-card-div">
                            <el-card class="box-card zgs-el-card">
                                <div slot="header" class="clearfix">
                                    <span>{{today}} 日报未交人员</span>
                                </div>
                                <el-tag type="warning">学生</el-tag>
                                <span v-for="item in noSubData.student" :key="noSubData.student.id" class="text item">
                                {{item.name}}
                                </span>
                            </el-card>
                        </div>

                        <div class="el-progress--circle zgs-circle">
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>{{today}} 日报提交提交情况</span>
                                </div>
                                <div v-if="percentValue2Stu === 100" class="item zgs-progress-div">
                                    <el-progress type="circle" :percentage="percentValue2Stu" width=300
                                                 color="#31aa74"></el-progress>
                                </div>
                                <div v-else-if="percentValue2Stu >= 70" class="item zgs-progress-div">
                                    <el-progress type="circle" :percentage="percentValue2Stu" width=300></el-progress>
                                </div>
                                <div v-else-if="percentValue2Stu >= 50" class="item zgs-progress-div">
                                    <el-progress type="circle" :percentage="percentValue2Stu" width=300
                                                 color="#FEA443"></el-progress>
                                </div>
                                <div v-else class="item zgs-progress-div">
                                    <el-progress type="circle" :percentage="percentValue2Stu" width=300
                                                 color="#881400"></el-progress>
                                </div>
                            </el-card>
                        </div>

                    </el-tab-pane>
                </el-tabs>

            </div>
            <!-- 卡片 => 日报未交人员 -->


        </div>
        <!-- 表 => 日报详情表格
        <div
                class="tableBar"
                style="display: inline-block"
        >
        </div>-->
        <!-- 日期选择器 => 选择日期 -->
        <div class="zgs-select-div">
            <span class="demonstration">选择查询的日期时间：</span>
            <el-date-picker
                    v-model="dateValue"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>

            <span class="demonstration zgs-name-span">输入查询的人员姓名：</span>
            <el-input v-model="searchValue" placeholder="请输入内容" class="search-input"></el-input>
            <el-button class="zgs-el-button" @click="findByCondition">查询</el-button>
        </div>

        <div class="zgs-table">
            <el-table
                    :data="tableData"
                    stripe
                    class="tableBox"
            >
                <el-table-column
                        type="index"
                        label="序号"
                        width="70"
                />
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="日报主题"
                >
                </el-table-column>
                <el-table-column
                        prop="belongTime"
                        label="日报所属时间"
                >
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="日报所属人"
                />
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="160"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                size="small"
                                class="blueBug"
                                @click="listHandle(scope.row)"
                        >
                            查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    class="pageList"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="counts"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            ></el-pagination>
        </div>
    </div>


    <!-- 对话框 => 展示未交日报人员名单 -->
    <el-dialog
            :title="classData.title"
            :visible.sync="classData.dialogVisible"
            width="70%"
            length="50%"
            :before-close="handleClose"
    >
        <!-- 对话框中的表格 -->
        <el-table
                :data="tableData4Dialog"
                stripe
                border
                class="tableBox"
        >
            <el-table-column
                    type="index"
                    label="序号"
                    width="70"
            />
            </el-table-column>
            <el-table-column
                    prop="belongTime"
                    label="漏交日报日期"
            >
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="未交日报人员"
            />
            </el-table-column>
        </el-table>
    </el-dialog>


    <!-- 对话框 => 展示日报内容详情 -->
    <el-dialog
            :title="dialogData.title"
            :visible.sync="dialogData.dialogVisible"
            width="70%"
            length="50%"
            :before-close="handleClose"
    >
        <!-- 对话框中的卡片 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>{{dialogData.subject}}</span>
                <el-button style="float: right; padding: 0 20px" type="text" @click="getSchmedule(dialogData.subject)">
                    查看计划
                </el-button>
                <el-button style="float: right; padding: 0 20px" type="text" @click="remindingdaily">提醒</el-button>
            </div>
            <div class="text item">
                {{dialogData.content}}
            </div>
        </el-card>
    </el-dialog>


    <!-- 对话框 => 日报提醒发邮件详情窗 -->
    <el-dialog
            :title="dialogData4Info.title"
            :visible.sync="dialogData4Info.dialogVisible"
            width="70%"
            length="50%"
            :before-close="handleClose"
    >
        <!-- 对话框中的邮件发送表单 -->
        <el-form ref="datastore" :model="datastore">
            <el-form-item label="姓名">
                <el-input v-model="datastore.username"
                          min="30"
                          type="text"
                          maxlength="10"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="datastore.email" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item label="督促内容">
                <el-input type="textarea" v-model="datastore.desc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">发送督促</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>


</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/category.js"></script>


<script>
    new Vue({
        el: '#category-app',
        data() {
            return {
                action: '',
                counts: 0,
                page: 1,
                pageSize: 10,
                tableData: [],                  // 用来存放日报展示数组
                tableData4Dialog: [],           // 用来存放展示日报未提交信息的数组
                noSubData:[],
                type: '',
                classData: {
                    'title': '日报未交详情窗',
                    'dialogVisible': false,
                    'categoryId': '',
                    'name': ''
                },
                today: '',            // 今日时间
                dateValue: '',          // 日期选择器的model
                percentValue: 50,               // 进度圆的进度
                searchValue: '',             // 搜索框内容
                dialogData: {
                    'title': '日报详情窗',
                    'dialogVisible': false,
                    'username': '',
                    'subject': '',
                    'content': ''
                },
                dialogData4Info: {
                    'title': '日报提醒详情窗',
                    'dialogVisible': false,
                    'username': '',
                    'subject': '',
                    'content': '',
                    'email': ''
                },
                datastore: {
                    'username': '',
                    'subject': '',
                    'content': '',
                    'email': '',
                    'desc': ''
                },
                countForNosub: 0,           // 日报未交人员总数
                countSum: 0,                // 日报所有成员
                countForNosub2Stu: 0,
                countForNosub2Tea: 0,
                countSum2Stu: 0,
                countSum2Tea: 0,
                percentValue2Stu: 0,
                percentValue2Tea: 0
            }
        },
        computed: {},


        methods: {
            async init() {
                // 以下内容为日报未交人员的展示功能
                await listNoSubDaily().then(res => {
                    if (String(res.code) === '1') {
                        // 请求返回数据成功
                        this.tableData4Dialog = res.data;
                        this.noSubData = res.map;
                        for (var i = 0; i < this.tableData4Dialog.length; i++) {
                            const date = new Date(this.tableData4Dialog[i].belongTime);
                            // 使用Date对象的方法获取年、月、日等信息
                            const year = date.getFullYear();
                            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
                            const day = String(date.getDate()).padStart(2, '0');
                            this.today = `${year}-${month}-${day}`;
                            this.tableData4Dialog[i].belongTime = `${year}-${month}-${day}`
                            this.tableData4Dialog[i].username = res.data[i].user.name
                            this.tableData4Dialog[i].email = res.data[i].user.email
                        }
                        this.countForNosub = parseInt(Number(res.data.length));
                        this.countForNosub2Stu = parseInt(this.noSubData.student.length);
                        this.countForNosub2Tea = parseInt(this.noSubData.teacher.length);

                        this.countSum = parseInt(res.map.count);
                        this.countSum2Stu = this.noSubData.sum2Stu;
                        this.countSum2Tea = this.noSubData.sum2Tea;

                        this.percentValue = parseInt(((this.countSum - this.countForNosub) / this.countSum) * 100);
                        this.percentValue2Stu = parseInt(((this.countSum2Stu - this.countForNosub2Stu) / this.countSum2Stu) * 100);
                        this.percentValue2Tea = parseInt(((this.countSum2Tea - this.countForNosub2Tea) / this.countSum2Tea) * 100);

                        if (isNaN(this.percentValue)){
                            this.percentValue = 0;
                        }
                        if (isNaN(this.percentValue2Stu)){
                            this.percentValue2Stu = 0;
                        }
                        if (isNaN(this.percentValue2Tea)){
                            this.percentValue2Tea = 0;
                        }


                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })


                // 以下内容为日报系统的展示页面
                await getCategoryPage({
                    'page': this.page,
                    'pageSize': this.pageSize,
                    'dateValue': this.dateValue,
                    'searchValue': this.searchValue
                }).then(res => {
                    if (String(res.code) === '1') {
                        this.tableData = res.data.records
                        for (var i = 0; i < this.tableData.length; i++) {
                            const date = new Date(this.tableData[i].belongTime);
                            // 使用Date对象的方法获取年、月、日等信息
                            const year = date.getFullYear();
                            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
                            const day = String(date.getDate()).padStart(2, '0');
                            this.tableData[i].belongTime = `${year}-${month}-${day}`
                            this.tableData[i].username = res.data.records[i].user.name
                        }
                        this.counts = Number(res.data.total)
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },

            handleQuery() {
                this.page = 1;
                this.init();
            },
            getSchmedule(subject) {
                axios.get(`/daily/getIdBySubject/${subject}`).then(res => {
                    window.parent.menuHandle({
                        id: '4',
                        url: '/paper/page/scheme/personTable.html?id=' + res.data.data,
                        name: '计划查看'
                    }, true)
                })


            },

            // 日报提醒功能
            async onSubmit() {
                this.$message.success('邮件发送成功！')
                this.dialogData4Info.dialogVisible = false
                this.dialogData.dialogVisible = false
                await sendEmailInfo({'email': this.datastore.email, 'desc': this.datastore.desc}).then(res => {
                    this.datastore.desc = ''
                })
            },

            findByCondition() {
                findByConditionJS({
                    'page': this.page,
                    'pageSize': this.pageSize,
                    'dateValue': this.dateValue,
                    'searchValue': this.searchValue
                })
                    .then((res) => {
                        console.log("这里是findByCondition")
                        console.log(res)
                        if (String(res.code) === '1') {
                            this.tableData = res.data.records
                            for (var i = 0; i < this.tableData.length; i++) {
                                const date = new Date(this.tableData[i].belongTime);
                                // 使用Date对象的方法获取年、月、日等信息
                                const year = date.getFullYear();
                                const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
                                const day = String(date.getDate()).padStart(2, '0');
                                this.tableData[i].belongTime = `${year}-${month}-${day}`
                                this.tableData[i].username = res.data.records[i].user.name
                            }
                            this.counts = Number(res.data.total)
                        } else {
                            this.$message.error(res.msg || '操作失败')
                        }
                    })
            },


            remindingdaily() {
                this.dialogData4Info.dialogVisible = true
                this.dialogData4Info.title = '日报提醒'
                this.action = 'edit'
            },

            listHandle(dat) {
                this.dialogData.title = '日报详情'
                this.action = 'edit'
                this.dialogData.username = dat.user.name
                this.dialogData.subject = dat.title
                this.dialogData.content = dat.content
                this.dialogData.id = dat.id
                this.dialogData.dialogVisible = true
                this.datastore.username = dat.user.name
                this.datastore.subject = dat.title
                this.datastore.content = dat.content
                this.datastore.email = dat.user.email
            },

            // 关闭弹窗
            handleClose() {
                this.classData.dialogVisible = false
                this.dialogData.dialogVisible = false
                this.dialogData4Info.dialogVisible = false
            },

            handleSizeChange(val) {
                this.pageSize = val
                this.init()
            },
            handleCurrentChange(val) {
                this.page = val
                this.init()
            }
        },
        created() {
            this.init()
        },
        mounted() {
        }
    })
</script>
</body>
</html>